import { FC } from 'react';
import { List, Modal, Typography, Pagination } from 'antd';
import dayjs from 'dayjs';
import { DeleteOutlined, MessageOutlined } from '@ant-design/icons';
import type { HistoryConversation } from 'types/chat';

import styles from './index.module.css';

const { Text } = Typography;

interface ChatHistoryProps {
  loading: boolean;
  historyList: HistoryConversation[];
  onSelect: (id: string) => void;
  onDelete: (id: string) => void;
  activeId?: string;
  hasMore: boolean;
  currentPage: number;
  pageSize: number;
  onPageChange: (page: number, size: number) => void;
}

const ChatHistory: FC<ChatHistoryProps> = ({
  loading = false,
  historyList = [],
  onSelect,
  onDelete,
  activeId,
  hasMore,
  currentPage = 1,
  pageSize = 20,
  onPageChange,
}) => {
  return (
    <div className={styles.historyContainer}>
      <List
        className={styles.historyList}
        dataSource={historyList}
        loading={loading}
        renderItem={(item) => (
          <List.Item
            className={`${styles.historyItem} ${
              item.id === activeId ? styles.active : ''
            }`}
            onClick={() => onSelect(item.id)}
            actions={[
              <DeleteOutlined
                key="delete"
                onClick={(e) => {
                  e.stopPropagation();
                  Modal.confirm({
                    title: '提示',
                    content: (
                      <span>
                        是否删除{' '}
                        <span style={{ color: '#216efd' }}>
                          {item.name}
                        </span>{' '}
                        该条历史对话记录?
                      </span>
                    ),
                    okText: '是',
                    cancelText: '否',
                    onOk: () => onDelete(item.id),
                  });
                }}
                className={styles.deleteIcon}
              />,
            ]}
          >
            <List.Item.Meta
              avatar={<MessageOutlined />}
              title={
                <div className={styles.itemTitle}>
                  <Text ellipsis>{item.name}</Text>
                </div>
              }
              description={
                <div className={styles.itemDesc}>
                  <Text type="secondary">
                    {dayjs(+item.updated_at * 1000).format('YYYY-MM-DD HH:mm:ss')}
                  </Text>
                </div>
              }
            />
          </List.Item>
        )}
        pagination={false}
      />
      <div className={styles.paginationWrapper}>
        <Pagination
          hideOnSinglePage={true}
          current={currentPage}
          pageSize={pageSize}
          total={hasMore ? (currentPage * pageSize) + pageSize : currentPage * pageSize}
          onChange={onPageChange}
          size="small"
          showSizeChanger={false}
          showQuickJumper={false}
          itemRender={(page, type, originalElement) => {
            if (type === 'page') {
              return page === currentPage ? page : null;
            }
            return originalElement;
          }}
        />
      </div>
    </div>
  );
};

export default ChatHistory;
